<template>
  <div>
    <!-- 顶栏 -->
    <div class="header">
      <div style="width: 1190px; margin: 0 auto">
        <a href="#" class="hd_nav">亲，请登录</a>
        &nbsp;&nbsp;
        <a href="#" class="hd_nav">免费注册</a>
        <div style="float: right">
          <a href="#" class="hd_nav">我的订单</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">我的就爱</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">就爱卖家中心</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">联系客服</a>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- 头部 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
        <div class="order_status">
          <el-steps
            :space="160"
            :active="0"
            finish-status="success"
            align-center
          >
            <el-step title="拍下商品"></el-step>
            <el-step title="付款到支付宝"></el-step>
            <el-step title="确认收货"></el-step>
            <el-step title="评价"></el-step>
          </el-steps>
        </div>
      </div>

      <!-- 主体 -->
      <el-main class="main">
        <!-- 收货地址 -->
        <div class="address_info">
          <div class="order_address">
            <div class="header_wrapper">
              <h3 class="header_title">选择收货地址</h3>
            </div>
            <div class="address">
              <el-radio-group
                class="address_list"
                v-model="radio3"
                size="medium"
              >
                <el-radio class="addr_default" label="1" border>
                  福建省 龙岩市 新罗区 曹溪街道 曹溪闽大路8号
                  闽西职业技术学院（南校区） （薛晨达 收） 17635399934 默认地址
                </el-radio>
                <el-radio class="addr_not_default" label="2" border>
                  福建省 龙岩市 新罗区 闽西职业技术学院 9#316
                </el-radio>
                <el-radio class="addr_not_default" label="3" border>
                  浙江省 杭州市 余杭区 文一西路969号 (311121)
                </el-radio>
                <el-radio class="addr_not_default" label="4" border>
                  广东省 深圳市 南山区 海天二路33号腾讯滨海大厦
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="order_info">
          <div class="header_wrapper">
            <h3 class="header_title">确认订单信息</h3>
          </div>
          <el-table
            :header-cell-style="headFirst"
            :data="tableData"
            style="width: 100%"
            show-summary="true"
            :summary-method="getSummaries"
          >
            <el-table-column
              header-align="center"
              prop="commodityName"
              label="店铺宝贝"
            >
              <el-table-column width="111">
                <template slot-scope="scope">
                  <img
                    :src="'http://localhost:5000'+scope.row.surfacePlot"
                    style="height: 90px; width: 90px"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="commodityName"
                width="223"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="propertyVel"
              label="商品属性"
              width="235"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="money"
              label="单价"
              width="150"
              :formatter="commodity_price"
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="quantity"
              label="数量"
              width="180"
            >
              <template slot-scope="scope">
                <el-input-number
                  size="mini"
                  v-model="scope.row.quantity"
                  @change="changeCount(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="right"
              prop="money"
              label="小计"
              width="120"
              :formatter="subtotal"
            ></el-table-column>
          </el-table>
          <el-button class="submit_order" @click="submitorder"
            >提交订单</el-button
          >
        </div>
      </el-main>
    </div>

    <!-- 底部 -->
    <el-footer>
      <!-- 版权声明、备案信息 -->
      <div class="copyright">
        <span style="margin-left: 50px">
          Copyright 2021 9iMall. All Rights Reserved 就爱商城 版权所有
        </span>
        <span style="margin-left: 50px">
          <a href="https://beian.miit.gov.cn/" target="_blank">
            晋ICP备2020012685号-1</a
          >
          &nbsp;|&nbsp;
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351228"
            ><img
              class="record_ico"
              src="https://cdn.jsdelivr.net/gh/XueChenda/blog_imgs/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            />
            闽公网安备 35080202351228号</a
          >
        </span>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { selectpaycommodity } from "../../api/shoppingcart";
export default {
  data() {
    return {
      radio3: "1",
      tableData: [],
      countmoney: 0,
    };
  },
  mounted() {
    this.select();
  },
  methods: {
    // 计算单个商品总价
    changeCount(row) {
      row.money = row.quantity * row.money;
    },
    select() {
      selectpaycommodity(this.$route.query.payid.map(Number))
        .then((data) => {
          for (let i = 0; i < data.data.length; i++) {
            console.log(data.data);
            this.tableData.push(data.data[i][0]);
          }
          console.log(this.tableData);
          // console.log(this.tableData[0].money);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 单价金额格式化
    commodity_price(row) {
      return parseFloat(row.money).toFixed(2);
    },

    // 小计金额格式化
    subtotal(row) {
      return parseFloat(row.money).toFixed(2);
    },

    // 合并表头
    headFirst({ row, colunm, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return { display: "none" };
      }
      return "background:#f5f7fa";
    },
    submitorder() {
      this.$router.push({
        path: "/payment",
        query: { countmoney: this.countmoney },
      });
    },
    // 最后一行合计
    getSummaries(param) {
      // 此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
      const { columns, data } = param;
      const len = columns.length;
      const sums = [];
      columns.forEach((column, index) => {
        // 如果是第一列，则最后一行展示为“总计”两个字
        if (index === 0) {
          sums[index] = "总计";
          // 如果是最后一列，索引为列数-1，则显示计算总和
        } else if (index === len - 1) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "N/A";
          }
          // 如果是除了第一列和最后一列的其他列，则显示为空
          console.log();
        } else {
          sums[index] = "";
        }
      });
      this.countmoney = sums[sums.length - 1];
      return sums;
    },
  },
};
</script>

<style scoped>
/* 顶栏 */
.header {
  height: 35px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
}

.hd_nav:hover {
  color: #ff5000;
}

/* 容器 */
.container {
  width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部 */
.top {
  padding-top: 24px;
  height: 98px;
}

/* Logo */
.logo {
  float: left;
  margin: 8px 20px 0 20px;
}
.logo:hover {
  cursor: pointer;
}

.order_status {
  position: relative;
  left: 214px;
  top: 5px;
  margin: 8px 20px 0 20px;
}

/* 主体 */
.main {
  min-height: calc(100vh - 95px);
  overflow: hidden;
  /* padding: 0; */
  border-radius: 18px;
  background-color: #fff;
}

.submit_order {
  float: right;
  margin-top: 10px;
}

/* 底部 */
.el-footer {
  text-align: center;
  line-height: 60px;
  margin: 35px auto;
  background-color: white;
}

/* 版权声明、备案信息 */
.copyright {
  color: #58666e;
  margin-left: 0;
}

/* 备案图标 */
.record_ico {
  vertical-align: middle;
}
</style>
